<template>
  <component :is="getWidgetName(data.type)" :data="data"></component>
</template>

<script setup lang="ts">
  import { reactive, ref, watch, onMounted, toRefs,defineAsyncComponent  } from 'vue'
  import buttonWidget from './buttonWidget.vue'
  import inputWidget from './inputWidget.vue'
  import selectWidget from './selectWidget.vue'
  
  const parentData = defineProps({
      data:{
          type: String,
          name: String
      }
  });

  const fieldCompMap={
    button: buttonWidget,
    input: inputWidget,
    select: selectWidget
  };
  function getWidgetName(dataType){
     return fieldCompMap[dataType];
  }
</script>

<style lang="scss" scoped>
</style>